<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin-left: 10px;
            float: left;
        }

        a {
            text-decoration: none;
            color: black;
        }

        input {
            width: 15px;
            text-align: center;
        }

        .decrement,
        .increment {
            cursor: pointer;
        }

        .cart-item,
        .amount-sum,
        .remove-batch {
            display: block;
            clear: left;
            margin: 0;
        }

        em {
            font-style: none !important;
        }
    </style>
</head>

<body>
    <div class="cart-item">
        <div class="p-price">￥12.40</div>
        <div class="father">
            <a href="javascript:;" class="decrement">
                -
            </a>
            <input type="text" name="" id="" value="1" class="txt">
            <a href="javascript:;" class="increment">
                +
            </a>
        </div>
        <div class="p-sum">￥12.40</div>
        <div class="p-action"><a href="javascript:;">删除</a></div>
    </div>

    <div class="cart-item">
        <div class="p-price">￥24.90</div>
        <div class="father">
            <a href="javascript:;" class="decrement">
                -
            </a>
            <input type="text" name="" id="" value="1" class="txt">
            <a href="javascript:;" class="increment">
                +
            </a>
        </div>
        <div class="p-sum">￥24.90</div>
        <div class="p-action"><a href="javascript:;">删除</a></div>
    </div>
    <div class="amount-sum">总件数<em>1</em>
    </div>
    <div class="price-sum">总价格<em>￥12.4</em>
    </div>
    <div class="remove-batch"><a href="javascript:;">删除选中商品</a></div>
    <div class="clear-all"><a href="javascript:;">删除全部</a></div>


    <script>
        $(function () {
            //增减商品数量模块 首先声明一个变量 当我们点击加号就让这个值加一然后赋值给文本框
            $(".increment").click(function () {
                //得到当前兄弟文本框的值
                var n = $(this).siblings('.txt').val();

                n++;
                $(this).siblings('.txt').val(n);
                //计算小计的价格
                var p = $(this).parent().siblings('.p-price').html();
                // console.log(p);
                p = p.substr(1);
                // console.log(p);
                //小计模块
                $(this).parent().siblings('.p-sum').html('￥' + (p * n).toFixed(2));
                getSum();
            });
            $(".decrement").click(function () {
                //得到当前兄弟文本框的值
                var n = $(this).siblings('.txt').val();
                if (n == 1) {
                    return false;
                }
                n--;
                $(this).siblings('.txt').val(n);
                //计算小计的价格
                var p = $(this).parent().siblings('.p-price').html();
                // console.log(p);
                p = p.substr(1);
                // console.log(p);
                //小计模块
                $(this).parent().siblings('.p-sum').html('￥' + (p * n).toFixed(2));
                getSum();
            });
            //用户修改文本框的值 计算小计模块
            $(".txt").change(function () {
                var n = $(this).val();
                //当前商品的价格
                var p = $(this).parent().siblings('.p-price').html();
                // console.log(p);
                p = p.substr(1);
                $(this).parent().siblings('.p-sum').html('￥' + (p * n).toFixed(2));
                getSum();
            });
            //计算总计和总额模块
            getSum();
            function getSum() {
                var count = 0; //计算总件数
                var money = 0; //计算总价钱
                $('.txt').each(function (i, ele) {
                    count += parseInt($(ele).val());
                });
                $(".amount-sum em").text(count);
                $(".p-sum").each(function (i, ele) {
                    money += parseFloat($(ele).text().substr(1));
                });
                $(".price-sum em").text("￥" + money.toFixed(2));
            }
            //删除选中的商品
            $(".p-action a").click(function () {
                //删除的是当前的商品
                $(this).parents('.cart-item').remove();
                getSum();
            });
            //清空购物车 删除全部商品
            $('.clear-all a').click(function () {
                $('.cart-item').remove();
                getSum();
            })
        })
    </script>
</body>

</html>